<template>
  <div class="user-index" id="Vue">

    <template>
      <div class="search-card">
        <el-form :inline="true">
          <el-form-item label="员工名称:" style="width: 100%">
            <el-input placeholder="请输入要搜索的员工姓名" v-model="searchParams.name" style="width:100%;"/>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="addshow">新增</el-button>

          <el-dialog
              :title="dialogtitle"
              :visible.sync="dialogFormVisible"
              :show-close="false">
            <el-form
                :model="staffDataform" :label-width="formLabelWidth" :rules="rulesa" ref="staffDataform">
              <el-form-item label="员工编号" :label-width="formLabelWidth" prop="staffId">
                <el-input fixed v-model="staffDataform.staffId" autocomplete="off" placeholder="员工编号"/>
              </el-form-item>
              <el-form-item label="员工姓名" :label-width="formLabelWidth" prop="staffName">
                <el-input v-model="staffDataform.staffName" autocomplete="off" placeholder="员工姓名"/>
              </el-form-item>
              <el-form-item label="手机号码" :label-width="formLabelWidth" prop="staffPhone">
                <el-input v-model="staffDataform.staffPhone" autocomplete="off" placeholder="手机号码"/>
              </el-form-item>
              <el-form-item label="证件号码" :label-width="formLabelWidth" prop="staffNameId">
                <el-input v-model="staffDataform.staffNameId" autocomplete="off" placeholder="证件号码"/>
              </el-form-item>
              请选择组织:
              <template>
                <el-select v-model="staffDataform.organizationvalue" placeholder="请选择组织">
                  <el-option
                      v-for="item  in orgitems"
                      :key="item.organizationId"
                      :label="item.organizationName"
                      :value="item.organizationId">
                  </el-option>
                </el-select>
              </template>
              请选择部门:
              <template>
                <el-select v-model="staffDataform.departmentvalue" placeholder="请选择部门">
                  <el-option
                      v-for="item in depitems"
                      :key="item.departmentId"
                      :label="item.departmentName"
                      :value="item.departmentId">
                  </el-option>
                </el-select>
              </template>
              请选择员工职务:
              <template>
                <el-select v-model="staffDataform.Postvalue" placeholder="请选择员工职务">
                  <el-option
                      v-for="item in postitems"
                      :key="item.postId"
                      :label="item.postName"
                      :value="item.postId">
                  </el-option>
                </el-select>
              </template>
              请选择员工状态:
              <template>
                <el-select v-model="staffDataform.Statevalue" placeholder="请选择员工状态">
                  <el-option
                      v-for="item in stateitems"
                      :key="item.staffStateId"
                      :label="item.staffStateName"
                      :value="item.staffStateId">
                  </el-option>
                </el-select>
              </template>
              <!--
                   <template>
                    <div>
                      <span class="demonstration">请选择出生日期</span>
                      <el-date-picker
                        v-model="birthday"
                        type="date"
                        placeholder="选择日期">
                      </el-date-picker>
                    </div>
                  </template>

    --><!--出生日期-->
            </el-form>
            <span>
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button @click="create">确定</el-button>
          </span>
          </el-dialog>
        </div>
      </div>
      <el-table
          :data="tableData"
          :fit="true"
          border
          style="width: 100%;">
        <el-table-column
            fixed
            prop="staffId"
            label="员工编号"
            width="150">
        </el-table-column>
        <el-table-column
            prop="staffName"
            label="员工姓名"
            width="120">
        </el-table-column>
        <el-table-column
            prop="organizationList[0].organizationName"
            label="组织"
            width="120">
        </el-table-column>
        <el-table-column
            prop="departmentList[0].departmentName"
            label="部门"
            width="120">
        </el-table-column>
        <el-table-column
            prop="postList[0].postName"
            label="职务"
            width="120">
        </el-table-column>
        <el-table-column
            prop="staffNameId"
            label="身份证号码"
            width="240">
        </el-table-column>
        <el-table-column
            prop="staffPhone"
            label="手机号码"
            width="120">
        </el-table-column>
        <el-table-column
            prop="stateList[0].staffStateName"
            label="状态"
            width="120">
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="data">
            <el-link type="primary" @click="modify(data.row)">修改</el-link>
            <el-popconfirm title="请确认是否删除此职位?" @confirm="remove(data.row)">
              <el-link class="ml-1" slot="reference" type="primary">删除</el-link>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-block">
        <el-pagination
            :current-page="searchParams.page_no"
            :page-sizes="[2, 5, 10, 15]"
            :page-size="searchParams.page_size"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="setPage"
            @size-change="setPageSize"
            :total="totalCount">
        </el-pagination>
      </div>
    </template>


  </div>
</template>


<script>
import * as api from "../../service/api";
import {post} from "../../service/api";

export default {
  name: "User.vue",
  data() {
    const FloatRegex = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/;
    var valistaffId = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入员工编号'));
      } else {
        callback();
      }
    };
    var valistaffName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('员工姓名'));
      } else {
        callback();
      }
    };
    var valistaffPhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('手机号码'));
      } else {
        callback();
      }
    };
    var valistaffNameId = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('证件号码'));
      } else {
        callback();
      }
    };

    // var valiorganization = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请选择组织'));
    //   } else {
    //     callback();
    //   }
    // };
    // var validepartment = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请选择部门'));
    //   } else {
    //     callback();
    //   }
    // };
    // var valiPost = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请选择员工职务'));
    //   } else {
    //     callback();
    //   }
    // };
    // var valiState = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请选择员工状态'));
    //   } else {
    //     callback();
    //   }
    // };

    return {
      tableData: [],
      totalCount: 0,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      dialogtitle: '',
      staffDataform: {
        id: '',
        staffId: '',
        staffName: '',
        staffPhone: '',
        staffNameId: '',
        organizationvalue: '',
        departmentvalue: '',
        Statevalue: '',
        Postvalue: ''
      },
      searchParams: {
        page_no: 1,
        page_size: 10,
        name: ''
      },
      orgitems: [],
      depitems: [],
      postitems: [],
      stateitems: [],

      rulesa: {
        staffId: [
          {validator: valistaffId, trigger: 'blur'}
        ],
        staffName: [
          {validator: valistaffName, trigger: 'blur'}
        ],
        staffPhone: [
          {validator: valistaffPhone, trigger: 'blur'}
        ],
        staffNameId: [
          {validator: valistaffNameId, trigger: 'blur'}
        ]
        // organizationvalue: [
        //   {validator: valiorganization, trigger: 'blur'}
        // ],
        // departmentvalue: [
        //   {validator: validepartment, trigger: 'blur'}
        // ],
        // Statevalue: [
        //   {validator: valiPost, trigger: 'blur'}
        // ],
        // Postvalue: [
        //   {validator: valiState, trigger: 'blur'}
        // ]
      },
      allgtList: []
    }

  }, mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      api.get("/staff/index", this.searchParams).then(data => {
        this.tableData = data.records; // 数据列表
        this.totalCount = data.total;
      });
      api.get("/organization/organizationData").then(data => {
        this.orgitems = data; // 数据列表
      });
      api.get("/department/departmentData").then(data => {
        this.depitems = data; // 数据列表
      });
      api.get("/state/stateData").then(data => {
        this.stateitems = data; // 数据列表
      });
      api.get("/post/postData").then(data => {
        this.postitems = data; // 数据列表
      })
    },
    create() {
      this.$refs.staffDataform.validate((valid) => {
        if (!valid) {
          return;
        }
        post('/staff/saveStaff', {
          id: this.staffDataform.id,
          staffId: this.staffDataform.staffId,
          staffName: this.staffDataform.staffName,
          staffPhone: this.staffDataform.staffPhone,
          staffNameId: this.staffDataform.staffNameId,
          organizationvalue: this.staffDataform.organizationvalue,
          departmentvalue: this.staffDataform.departmentvalue,
          Statevalue: this.staffDataform.Statevalue,
          Postvalue: this.staffDataform.Postvalue,
        }, 'form')
            .then(result => { // 正确的返回结果;
              this.dialogFormVisible = false;
              this.loadData();
              this.staffDataform = []
            }).catch(e => { // 执行失败的结果
          this.$message(e.message)
        })
      });
    },

    modify(data) {
      this.dialogtitle = "修改员工信息";
      this.dialogFormVisible = true;
      for (let i = 0; i < this.orgitems.length; i++) {
        if (data.organizationList[0].organizationName == this.orgitems[i].organizationName) {
          this.staffDataform.organizationvalue = i + 1;
          break
        }
      }
      for (let i = 0; i < this.depitems.length; i++) {
        if (data.departmentList[0].departmentName == this.depitems[i].departmentName) {
          this.staffDataform.departmentvalue = i + 1;
          break
        }
      }
      for (let i = 0; i < this.postitems.length; i++) {
        if (data.postList[0].postName == this.postitems[i].postName) {
          this.staffDataform.Postvalue = i + 1;
          break
        }
      }
      for (let i = 0; i < this.stateitems.length; i++) {
        if (data.stateList[0].staffStateName == this.stateitems[i].staffStateName) {
          this.staffDataform.Statevalue = i - 1;
          break
        }
      }
      this.staffDataform.id = data.id;
      this.staffDataform.staffId = data.staffId;
      this.staffDataform.staffName = data.staffName;
      this.staffDataform.staffPhone = data.staffPhone;
      this.staffDataform.staffNameId = data.staffNameId;
    },
    remove(data) {
        post('/staff/delStaff', {id: data.id,}, 'form')
            .then(result => {
              this.loadData();
            }).catch(e => { // 执行失败的结果
          this.$message(e.message)
        })
    },
    setPage(page) {
      this.searchParams.page_no = page; // 设置查询的页码
      this.loadData(); // 重新查询数据
    },
    setPageSize(page) {
      this.searchParams.page_no = 1;
      this.searchParams.page_size = page; // 设置查询的页码
      this.loadData(); // 重新查询数据
    },
    addshow() {
      this.dialogtitle = '添加员工信息'
      this.dialogFormVisible = true;
      this.staffDataform.id = '';
      this.staffDataform.organizationvalue = '';
      this.staffDataform.departmentvalue = '';
      this.staffDataform.Postvalue = '';
      this.staffDataform.Statevalue = '';
      this.staffDataform.staffId = '';
      this.staffDataform.staffName = '';
      this.staffDataform.staffPhone = '';
      this.staffDataform.staffNameId = '';
    },
    search(){
      if (this.Users.name.length!=0){
        post('/staff/searchStaff', this.searchParams, 'form')
            .then(result => {
              this.loadData();
            }).catch(e => { // 执行失败的结果
          this.$message(e.message)
        })
      }else {
        this.loadData();
      }
    }
  }
}
</script>

<style scoped>

</style>